<template>
	<view>
		<u-popup :show="show" :round="10" :closeable="true" mode="bottom" @close="close" :safeAreaInsetBottom="false">
			<view class="wh p10 bf8">
				<view class="bf p10 bs10">
					<u--form labelPosition="left" :model="form" :loading="loading" labelWidth="100" ref="uForm">
						<u-form-item label="券ID：" prop="type" ref="item1">{{form.sn}}</u-form-item>
						<u-form-item label="券类型：" prop="type" ref="item1">
							<text v-if="form.type==1">代金券</text>
							<text v-else-if="form.type==2">折扣券</text>
							<text v-else-if="form.type==3">兑换券</text>
							<text v-else-if="form.type==4">配送券</text>
						</u-form-item>
						<u-form-item label="券名称：" prop="name" ref="item1">{{form.name}}</u-form-item>
						<u-form-item label="获得来源：" prop="" ref="item1">优惠券包</u-form-item>
						<u-form-item v-if="form.type!=4" label="适用场景：" prop="scenario" ref="item1">
							<view class="">
								<text class="pr10" v-if="form.scenario.includes(2)">店内</text>
								<text class="pr10" v-if="form.scenario.includes(1)">外卖</text>
								<text class="pr10" v-if="form.scenario.includes(3)">扫码点餐</text>
								<text class="pr10" v-if="form.scenario.includes(4)">快餐</text>
								<text v-if="form.scenario.includes(5)">当面付</text>
							</view>
						</u-form-item>
						<u-form-item v-if="form.type==4" label="优惠折扣：" prop="" ref="item1">
							<text v-if="form.rule.disContent==1">免配送费</text>
							<text v-if="form.rule.disContent==3">免配送费</text>
						</u-form-item>
						<u-form-item v-if="form.type==1||(form.type==4&&form.rule.disContent==3)" label="优惠金额："
							ref="item1">
							{{form.rule.money}}元
						</u-form-item>
						<u-form-item v-if="form.type==2" label="优惠折扣：" prop="" ref="item1">
							{{form.rule.discount}}折
						</u-form-item>
						<u-form-item v-if="form.type==3" label="优惠方式：" prop="" ref="item1">
							<text v-if="form.rule.disType==1">优惠最高价格商品</text>
							<text v-if="form.rule.disType==2">优惠最低价格商品</text>
						</u-form-item>
						<u-form-item v-if="form.type==3" label="适用商品：" prop="" ref="item1">
							<view><text v-for="(v,i) in form.goods" :key="i">{{v.name}}，</text></view>
						</u-form-item>
						<u-form-item v-if="form.type!==3" label="使用门槛：" prop="" ref="item1">
							<text v-if="form.startSwitch==0">无门槛</text>
							<text v-else>订单金额满{{form.startMoney}}元可用</text>
						</u-form-item>
						<view class="pl80">
							<view v-if="form.threshold.includes(1)">加料商品参与优惠</view>
							<view v-if="form.threshold.includes(2)">包装费参与优惠</view>
							<view v-if="form.threshold.includes(3)">配送费参与优惠</view>
						</view>
						<u-form-item label="券有效期：" prop="" ref="item1">
							<view v-if="form.period.type==1">
								{{form.period.timeArr.startTime}}~{{form.period.timeArr.endTime}}
							</view>
							<view v-if="form.period.type==2">
								获得券{{form.period.day.type==1?'当日':'次日'}}开始 {{form.period.day.value}}个自然日内有效
							</view>
							<view v-if="form.period.type==3">
								获得券{{form.period.hours.type==1?'当日':'次日'}}开始{{form.period.hours.value}}个自然日内有效
							</view>
						</u-form-item>
						<view v-if="form.type==1||form.type==2">
							<u-form-item label="适用商品：" prop="" ref="item1">
								<text v-if="form.goodsType==1">全部商品</text>
								<text v-if="form.goodsType==2">指定商品适用</text>
								<text v-if="form.goodsType==3">指定商品不适用</text>
							</u-form-item>
							<view class="pl80" v-if="form.goodsType!==1">
								<text v-for="(v,i) in form.goods" :key="i">{{v.name}}，</text>
							</view>
						</view>
						<u-form-item label="适用门店：" prop="" ref="item1">
							<text v-if="form.storeType==1">全部门店</text>
							<text v-if="form.storeType==2">指定门店适用</text>
						</u-form-item>
						<view class="pl80" v-if="form.storeType==2">
							<text v-for="(v,i) in storeList" :key="i">{{v.name}}，</text>
						</view>
						<u-form-item label="使用状态：" prop="" ref="item1">
							<text v-if="form.state == 0">已过期</text>
							<text v-if="form.state == 1">待使用</text>
							<text v-if="form.state == 2">已使用</text>
							<text v-if="form.state == 3">已作废</text>
						</u-form-item>
						<!-- <u-form-item label="核销码显示：" prop="" ref="item1">
							<text>{{form.verificationSwitch==1?'显示':'不显示'}}</text>
						</u-form-item>
						<u-form-item label="赠送设置：" prop="" ref="item1">
							<text>{{form.regiftSwitch==1?'可赠送':'不可赠送'}}</text>
						</u-form-item> 
						<view v-if="form.regiftSwitch==1">
							<u-form-item label="转增文案：" prop="" ref="item1">{{form.regiftTitle}}</u-form-item>
							<u-form-item label="转增图片：" prop="" ref="item1">
								<u--image :src="form.regiftImage" width="50px" height="50px"></u--image>
							</u-form-item>
						</view>
						<u-form-item label="使用说明：" prop="" ref="item1">{{form.body||'-'}}</u-form-item> -->
					</u--form>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				subColor: uni.getStorageSync('subject_color'),
				loading: false,
				show: false,
				id: "",
				type: "",
				form: {
					storeIds: [],
					scenario: [],
				},
				storeList: [],
			}
		},
		methods: {
			open(val) {
				this.id = val.id
				this.type = val.type
				this.show = true
				this.fetchData()
				this.getStore()
			},
			async fetchData() {
				this.loading = true
				const {
					data
				} = await this.beg.request({
					url: `${this.api.getCouponEdit}/${this.id}`,
				})
				this.form = data ? data : {};
				this.form.scenario = data.scenario ? data.scenario : []
				this.loading = false
			},
			async getStore() {
				const {
					data: {
						list
					}
				} = await this.beg.request({
					url: this.api.storeList,
					data: {
						pageNo: 1,
						pageSize: 9999
					}
				})
			},
			close() {
				this.show = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.coupon {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;

		.top {
			position: relative;
			top: 0;
			left: 50%;
			transform: translateX(-50%);
			width: 40%;
			border-bottom-left-radius: 20rpx;
			border-bottom-right-radius: 20rpx;
		}

		.left {
			width: 140rpx;
		}

		.right {
			padding-right: 35rpx;
			border-left: 3rpx dashed #ddd;
		}

		.rBox {
			position: absolute;
			right: 0;
			top: 0;
			width: 70rpx;
			height: 35rpx;
			line-height: 35rpx;
			font-size: 23rpx;
			text-align: center;
			background: #fb6367;
			border-bottom-left-radius: 20rpx;
		}
	}

	.bottomBox {
		position: absolute;
		bottom: 0;
		left: 0;
		padding: 35rpx 35rpx 45rpx;
		width: 100vw;
		box-shadow: 0 0 20rpx 10rpx #ddd;
	}
</style>